<!--登陆以后首页-->
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户登录后页面</title>
    <link th:href="@{/mb/css/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/css.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/mb/css/Animation.css}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" th:href="@{/style/container.css}">
</head>


<body>
<!--头开始-->
<header class="navbar-fixed-top headerbg" th:each="codeUser:${codeUsers}">
    <!--左上角logo-->
    <div class="logo">
        <a href="http://www.baidu.com" th:href="@{/mc/logged/loginIndex(userNo=${codeUser.userNo})}" class="fl mt10">
            <img th:src="@{/mb/images/mclogo.png}" style="margin-top: -30px;margin-left: 30px" alt=""></a></div>

    <!--导航栏剩余部分-->
    <div class="navBox hidden-xs hidden-sm" style="float: right;margin-right: 10%">
             <ul class="navList list-unstyled">
                <li class="navLi on">
                    <h3>
                    <a th:href="@{/mc/logged/loginIndex(userNo=${codeUser.userNo})}"><span>首页</span></a>
                    </h3>
                </li>
                <li class="navLi"><h3><a href="#"
                                         th:href="@{/mc/item/loginItemsList(userNo=${codeUser.userNo })}"><span>项目</span></a>
                </h3></li>

                <li class="navLi">
                    <h3>
                        <div th:if="${codeUser.type}==1">
                            <a href="#" th:href="@{/mc/item/myRelease(userNo=${codeUser.userNo})}"><span>我的发布</span></a>
                        </div>
                    </h3>
                </li>

                <li class="navLi">
                    <h3>
                        <span th:if="${codeUser.type}==1">
                            <a href="#"
                               th:href="@{/mc/item/releaseProject(userNo=${codeUser.userNo})}"><span>项目发布</span></a></span>
                    </h3>
                </li>
                <li class="navLi">
                    <h3>
                        <span th:if="${codeUser.type}==2">
                            <a href="#"
                               th:href="@{/mc/stage/participatingProjects(userNo=${codeUser.userNo})}"><span>我的参与</span></a></span>
                    </h3>
                </li>
                <li class="navLi"><h3><a href="#"
                                         th:href="@{/mc/logged/help(userNo=${codeUser.userNo})}"><span>帮助</span></a></h3>
            </li>
            <li class="navLi"><h3>
                <span th:if="${codeUser.image}">
                <img th:src="@{'/article/'+ ${codeUser.image}}" height="60px" width="60px"> </span>
                <span th:unless="${codeUser.image}">
                <img th:src="@{/images/center.png}" height="60px" width="60px">
                </span></h3>
                <div class="navSub">
                    <ul class="navSubList list-unstyled">
                        <li class="navSubLi">
                            <h4><a style="text-decoration: none" th:text="'hello，'+${codeUser.nickName}">hello，xxx</a>
                            </h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/logged/userInformation(userNo=${codeUser.userNo})}">● 个人中心</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/logged/moneyPay(userNo=${codeUser.userNo})}">● 我的开发宝</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/item/myCollection(userNo=${codeUser.userNo})}">● 我的收藏</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/logged/advise(userNo=${codeUser.userNo})}">● 我要建议</a></h4>
                        </li>
                        <li class="navSubLi">
                            <h4><a th:href="@{/mc/}">● 退出登录</a></h4>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</header>
<!--头结尾-->
<!--动态线条-->
<div class="bannerN animated">
    <div class="imgFull"><img class="img-responsive" th:src="@{/mb/images/ab_bg_01.png}"></div>
    <div class="clouds_one"></div>
    <div class="clouds_two"></div>
    <div class="clouds_three"></div>
</div>
<!--动态线条结尾-->





<div id="banner" class="carousel slide" style="margin-top: 30px">
    <ol class="carousel-indicators">
        <li data-target="#banner" data-slide-to="0" class="active"></li>
        <li data-target="#banner" data-slide-to="1"></li>
        <li data-target="#banner" data-slide-to="2"></li>
        <li data-target="#banner" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img th:src="@{/images/banner1.png}" alt="">
        </div>
        <div class="item">
            <img th:src="@{/images/banner2.png}" alt="">
        </div>
        <div class="item">
            <img th:src="@{/images/banner1.png}" alt="">
        </div>
        <div class="item">
            <img th:src="@{/images/banner2.png}" alt="">
        </div>
    </div>
    <a class="carousel-control left" href="#banner"
       data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#banner"
       data-slide="next">&rsaquo;</a>
</div>
<!--/banner-->

<!--操作流程-->
<div id="products" class="container">
    <p style="text-align: center;font-size: 35px;line-height: 170px;">操作流程</p>
    <ul class="row">
        <li class="col-sm-3">
            <div class="con">
                <a href="#" class="img"><img th:src="@{/images/step-1.png}" width="87" height="129"></a>
                <div class="text-center" style="height: auto;">
                    <h2>认证成为开发者</h2>
                    <p>
                        <span>完善技能与经验</span><br>
                        <span>完成身份认证</span>
                    </p>
                </div>
            </div>
        </li>
        <li class="col-sm-3">
            <div class="con">
                <a href="#" class="img"><img th:src="@{/images/step-2.png}" width="87" height="129"></a>
                <div class="text-center" style="height: auto;">
                    <h2>报名项目</h2>
                    <p>
                        <span>项目报价合理</span><br>
                        <span>每日有近百个项目正在招募</span>
                    </p>
                </div>
            </div>
        </li>
        <li class="col-sm-3">
            <div class="con">
                <a href="#" class="img"><img th:src="@{/images/step-3.png}" width="87" height="129"></a>
                <div class="text-center" style="height: auto;">
                    <h2>确认合作</h2>
                    <p>
                        <span>双方确认合作意向</span><br>
                        <span>即可进入开发阶段</span>
                    </p>
                </div>
            </div>
        </li>
        <li class="col-sm-3">
            <div class="con">

                <a href="#" class="img"><img th:src="@{/images/step-4.png}" width="87" height="129"></a>
                <div class="text-center" style="height: auto;">
                    <h2>获取收益</h2>
                    <p>
                        <span>项目验收结束后</span><br>
                        <span>即可获取收益</span>
                    </p>
                </div>
            </div>
        </li>
    </ul>
</div>
<!--/产品展示-->
<!--application-->
<div id="applicationBg">
    <div id="application" class="container" style="width: 100%;">
        <div style="text-align: center;font-size: 30px;margin-top: 50px;margin-bottom: 60px;height: 400px"
             id="container"></div>
    </div>
</div>
<!--/application-->


<!--Partners-->
<div id="partnersBg" style="height: 460px;">
    <div style="height: 70px;" align="center">
        <h1 class="index_title text-center" style="text-align: center;line-height: 30px;margin-top: 50px;">项目类型</h1>
        <br>
    </div>
<br>
    <div id="container2" style="height: 400px"></div>
</div>
<!--/Partners-->



<!--联系我们-->
<div class="contact-container">
    <div class="contact-connect-container">
        <div class="button-container">
            <img th:src="@{/images/contacts.png}"/><span style="margin-left: 5px;">联系我们</span>
        </div>
        <div class="pop" style="display: none;">
            <div class="word" style="text-align: center;"><span style="font-size: 12px;">在线咨询请扫描下面二维码👇</span></div>
            <div style="height: 120px;width: 120px;margin:20px 22px;">
                <img th:src="@{/images/QR.jpg}" style="width: 120px;height: 120px;margin-top: -15px;"/>
            </div>
        </div>
    </div>
</div>
<div style="margin-top: 30px"></div>

<footer class="footerBg">
    <div class="container"><span class="footer_logo"><img th:src="@{/mb/images/mclogo.png}"></span><span class="CopyRight_name">码虫互联网服务外包平台 </span></div>
</footer>

</body>
<script th:src="@{/code/highcharts.js}"></script>
<script th:src="@{/code/modules/exporting.js}"></script>
<script th:src="@{/mb/js/jquery-3.3.1.min.js}" type="text/javascript"></script>
<script th:src="@{/mb/js/jquery.js}" type="text/javascript"></script>
<script type="text/javascript" th:src="@{/js/Contacts.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/respond.js}"></script>
<script th:src="@{/js/html5.js}"></script>
<script>
    var chart = Highcharts.chart('container', {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: '用户擅长技术占比'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '该技术占比',
            data: [
                ['Net', [[${netS}]]],
                ['Java', [[${javaS}]]],
                {
                    name: 'PHP',
                    y: [[${phpS}]],
                    sliced: true,
                    selected: true
                },
                ['ASP', [[${aspS}]]],
                ['C语言', [[${cS}]]],
                ['大数据', [[${bigdataS}]]]
            ]
        }]
    });
</script>


<script>
    var chart = Highcharts.chart('container2',{
        chart: {
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 25,
                depth: 70,
                viewDistance: 100,      // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
                frame: {                // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
                    // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
                    // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
                    bottom: {
                        size: 10
                    },
                    side: {
                        size: 1,
                        color: 'transparent'
                    },
                    back: {
                        size: 1,
                        color: 'transparent'
                    }
                }
            },
        },
        title: {
            text: '各项目类型数量统计'
        },
        subtitle: {
            text: '请注意值为 0 和 null 的区别'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        xAxis: {
            categories: Highcharts.getOptions().lang.shortMonths
        },
        yAxis: {
            title: {
                text: "数量"
            }
        },
        series: [{
            name: '项目',
            data: [ [[${web}]], [[${app}]], [[${wx}]], [[${routine}]], [[${html}]], [[${other}]] ]
        }]
    });
</script>

</html>
